<!doctype html>
<html class="theme-next use-motion theme-next-mist">
<head>
  
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

  <meta name="google-site-verification" content="K8DCBviaoTBKVs28YBB7IBIbospQ9RVlgSh81RYMUhY" />


  <meta name="baidu-site-verification" content="tXr3ZTm3Hx" />



  <link rel="stylesheet" type="text/css" href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5"/>


<link rel="stylesheet" type="text/css" href="/css/main.css?v=0.4.5.1"/>

  <meta name="description" content="xgfe's blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native." />


  <meta name="keywords" content="xgfe, xg, fe, 鲜果前端, 前端" />


  <link rel="alternate" target="_blank" href="/atom.xml" title="xgfe" type="application/atom+xml" />


  <link rel="shorticon icon" type="image/x-icon" href="http://p0.meituan.net/xgfe/2db359f56ce13be30dedef160e0e57ce16958.ico?v=0.4.5.1" />

<meta name="description" content="xgfe&apos;s blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.">
<meta name="keywords" content="xgfe, xg, fe, 鲜果前端, 前端">
<meta property="og:type" content="website">
<meta property="og:title" content="xgfe">
<meta property="og:url" content="http://xgfe.github.io/page/9/index.html">
<meta property="og:site_name" content="xgfe">
<meta property="og:description" content="xgfe&apos;s blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="xgfe">
<meta name="twitter:description" content="xgfe&apos;s blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.">


<script type="text/javascript" id="hexo.configuration">
  var CONFIG = {
    scheme: 'Mist',
    sidebar: 'post'
  };
</script>

  <title> xgfe </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
  <div style="position: fixed; top: -9999px; left: -9999px;">
    <img src="http://p0.meituan.net/xgfe/082a9624ba5ae8602150a2d43968463e49348.png" alt="xgfe"/>
  </div>
  <!--[if lte IE 8]>
  <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;margin:0 auto;'>
    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
      <img src="http://7u2nvr.com1.z0.glb.clouddn.com/picouterie.jpg" border="0" height="42" width="820"
           alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today or use other browser ,like chrome firefox safari."
           style='margin-left:auto;margin-right:auto;display: block;'/>
    </a>
  </div>
<![endif]-->
  

  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?3601d4483819a5ab6ddabb0b6422a328";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <div class="container one-column 
   page-home 
">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><h1 class="site-meta">
  <span class="logo-line-before"><i></i></span>
  <a href="/" class="brand" rel="start">
      <span class="logo">
        <i class="icon-next-logo"></i>
      </span>
      <span class="site-title">xgfe</span>
  </a>
  <span class="logo-line-after"><i></i></span>
</h1>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  
  

  
    <ul id="menu" class="menu menu-left">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            <i class="menu-item-icon icon-next-home"></i> <br />
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            <i class="menu-item-icon icon-next-archives"></i> <br />
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            <i class="menu-item-icon icon-next-tags"></i> <br />
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-join">
          <a href="/join" rel="section">
            <i class="menu-item-icon icon-next-join"></i> <br />
            加入我们
          </a>
        </li>
      
      <!-- slide-links added by felix -->
      <li class="menu-item menu-item-slides" style="opacity: 1; transform: translateY(0px);">
        <a href="http://xgfe.github.io/Basics/" target="_blank" rel="section">
          <i class="menu-item-icon icon-next-slides"></i> <br>
          Basics
        </a>
      </li>
      <li class="menu-item menu-item-slides" style="opacity: 1; transform: translateY(0px);">
        <a href="https://slides.com/xgfe" target="_blank" rel="section">
          <i class="menu-item-icon icon-next-slides"></i> <br>
          Slides
        </a>
      </li>

      
      
    </ul>
  

  
    <div class="site-search">
      

    </div>
  

    <div class="site-search">
      <form class="site-search-form" id="gg-form" action="https://www.google.com/webhp" >
        <input type="text" name="q" id="gg-search-input" class="menu-search-input">
      </form>
    </div>
</nav>
 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div id="content" class="content"> 
  <section id="posts" class="posts-expand">
    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/11/23/chenwubai/d3-basicCharts-line/" itemprop="url">
                基于D3.js的折线图的实现
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-11-23T15:00:00+08:00" content="2015-11-23">
            2015-11-23
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/chenwubai/" itemprop="url" rel="index">
                  <span itemprop="name">chenwubai</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
          <span class="post-tags">
            &nbsp; | &nbsp;
            
              <a href="/tags/数据可视化/" rel="tag"><i class="icon-next-tags"></i>数据可视化</a>
            
              <a href="/tags/svg/" rel="tag"><i class="icon-next-tags"></i>svg</a>
            
              <a href="/tags/D3-js/" rel="tag"><i class="icon-next-tags"></i>D3.js</a>
            
          </span>
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <p>&emsp;&emsp;在<a href="/2015/11/23/chenwubai/d3-basicCharts-bar/#more">《基于D3.js的柱状图的实现》</a>中已经介绍过如何用D3.js来实现一个简单的柱状图了。现在就让这道新世界的大门再打开一些，我们来用D3.js来实现折线图。<br>
          <div class="post-more-link text-center">
            <a class="btn" href="/2015/11/23/chenwubai/d3-basicCharts-line/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/11/23/chenwubai/d3-basicCharts-bar/" itemprop="url">
                基于D3.js的柱状图的实现
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-11-23T00:00:00+08:00" content="2015-11-23">
            2015-11-23
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/chenwubai/" itemprop="url" rel="index">
                  <span itemprop="name">chenwubai</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
          <span class="post-tags">
            &nbsp; | &nbsp;
            
              <a href="/tags/数据可视化/" rel="tag"><i class="icon-next-tags"></i>数据可视化</a>
            
              <a href="/tags/svg/" rel="tag"><i class="icon-next-tags"></i>svg</a>
            
              <a href="/tags/D3-js/" rel="tag"><i class="icon-next-tags"></i>D3.js</a>
            
          </span>
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <p>&emsp;&emsp;数据可视化一直是前端领域中不容忽略的一块领域。简而言之，数据可视化就是借助图形化的手段把生硬的数据生动化，以此来展示出数据想要表达的信息。而图表是大家最最最通常的一种数据可视化手段，可全靠自己纯手动编写各种图表实在是让人头疼，各种计算各种烦。没事儿，现在就为大家打开一道新世界的大门——用D3.js来实现柱状图。<br>
          <div class="post-more-link text-center">
            <a class="btn" href="/2015/11/23/chenwubai/d3-basicCharts-bar/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/11/17/scliuyang/svg-advanced/" itemprop="url">
                SVG进阶教程
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-11-17T16:32:00+08:00" content="2015-11-17">
            2015-11-17
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/scliuyang/" itemprop="url" rel="index">
                  <span itemprop="name">scliuyang</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
          <span class="post-tags">
            &nbsp; | &nbsp;
            
              <a href="/tags/svg/" rel="tag"><i class="icon-next-tags"></i>svg</a>
            
              <a href="/tags/进阶/" rel="tag"><i class="icon-next-tags"></i>进阶</a>
            
          </span>
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <p>本文在大概了解SVG的基础上，深入的讲解一些SVG常用的知识，主要有以下几点  </p>
<ol>
<li>JS操作SVG</li>
<li>viewport和viewbox</li>
<li>SVG变换</li>
<li>SVG动画</li>
<li>SVG clip-path</li>
</ol>
          <div class="post-more-link text-center">
            <a class="btn" href="/2015/11/17/scliuyang/svg-advanced/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/10/28/felix/git-commit-hook/" itemprop="url">
                git commit hook
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-10-28T00:00:00+08:00" content="2015-10-28">
            2015-10-28
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/felix/" itemprop="url" rel="index">
                  <span itemprop="name">felix</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
          <span class="post-tags">
            &nbsp; | &nbsp;
            
              <a href="/tags/git/" rel="tag"><i class="icon-next-tags"></i>git</a>
            
              <a href="/tags/git-hook/" rel="tag"><i class="icon-next-tags"></i>git hook</a>
            
              <a href="/tags/代码规范/" rel="tag"><i class="icon-next-tags"></i>代码规范</a>
            
          </span>
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <p>xgfe团队已经定制了自己的html的编码规范，对应的html规范检查工具<a href="https://github.com/yangjiyuan/xg-htmlhint" target="_blank" rel="external">xg-htmlhint</a>。以后也会有对应的js, css, sass编码规范和检查工具诞生，但是规范的制定和执行是两码事儿，而且往往存在很大的不对等。虽然辅以强大的编辑器插件我们可以做到在文件保存时做规范检查和提醒，但这样一来可能会打断思路，再者多多少少可以被轻易绕过。所以本文介绍引入git commit hook，在本地Commit代码之前先进行代码规范检查，通过后才能进行Commit。<br>
          <div class="post-more-link text-center">
            <a class="btn" href="/2015/10/28/felix/git-commit-hook/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/10/21/HeOH/xg-htmlhint-for-vim/" itemprop="url">
                Vim使用xg-htmlhint配置教程
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-10-21T00:00:00+08:00" content="2015-10-21">
            2015-10-21
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/HeOH/" itemprop="url" rel="index">
                  <span itemprop="name">HeOH</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
          <span class="post-tags">
            &nbsp; | &nbsp;
            
              <a href="/tags/vim/" rel="tag"><i class="icon-next-tags"></i>vim</a>
            
              <a href="/tags/htmlhint/" rel="tag"><i class="icon-next-tags"></i>htmlhint</a>
            
          </span>
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <p>&emsp;&emsp;在<a href="/2015/10/08/yangjiyuan/html-hinting-tool/">《HTML代码检查工具实践》</a>中对xg-htmlhint进行了详细的介绍。本文主要针对vim使用xg-htmlhint工具需要的配置安装进行了说明。<br>
          <div class="post-more-link text-center">
            <a class="btn" href="/2015/10/21/HeOH/xg-htmlhint-for-vim/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/10/20/chenwubai/xg-htmlhint-config-in-Sublime-Text-3/" itemprop="url">
                Sublime Text 3使用xg-htmlhint配置教程
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-10-20T16:32:00+08:00" content="2015-10-20">
            2015-10-20
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/chenwubai/" itemprop="url" rel="index">
                  <span itemprop="name">chenwubai</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
          <span class="post-tags">
            &nbsp; | &nbsp;
            
              <a href="/tags/htmlhint/" rel="tag"><i class="icon-next-tags"></i>htmlhint</a>
            
          </span>
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <p>&emsp;&emsp;在<a href="/2015/10/08/yangjiyuan/html-hinting-tool/">《HTML代码检查工具实践》</a>中对xg-htmlhint进行了详细的介绍。本文主要针对Sublime Text 3使用xg-htmlhint工具需要的配置安装进行了说明。该教程只针对Sublime Text 3，在Sublime Text 2中可能会安装出错。<br>
          <div class="post-more-link text-center">
            <a class="btn" href="/2015/10/20/chenwubai/xg-htmlhint-config-in-Sublime-Text-3/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/10/08/y8n/html-hinting-tool/" itemprop="url">
                HTML代码检查工具实践
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-10-08T00:00:00+08:00" content="2015-10-08">
            2015-10-08
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/y8n/" itemprop="url" rel="index">
                  <span itemprop="name">y8n</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
          <span class="post-tags">
            &nbsp; | &nbsp;
            
              <a href="/tags/htmlhint/" rel="tag"><i class="icon-next-tags"></i>htmlhint</a>
            
              <a href="/tags/html/" rel="tag"><i class="icon-next-tags"></i>html</a>
            
              <a href="/tags/代码规范/" rel="tag"><i class="icon-next-tags"></i>代码规范</a>
            
          </span>
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>作为一只页面仔，写出一手漂（niu）亮（bi）的代码一直是我们不懈的追求。HTML作为前端开发入门级的语言，把它熟练掌握是基本功，不光如此，还需要在一个团队里保持良好的编码规范，使得代码易被理解和被维护。<br>就现阶段来看，我们还是没有形成统一的代码风格，写出的东西五花八门，等项目做大之后，其中的诸多问题必然会暴露出来。所以，为了能省（shao）时（jia）省（dian）力（ban），我们需要制定一套符合现有团队的规范、更需要检查代码是否符合规范的自动化工具。<br>
          <div class="post-more-link text-center">
            <a class="btn" href="/2015/10/08/y8n/html-hinting-tool/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/09/24/felix/blog-instructions/" itemprop="url">
                使用说明书
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-09-24T00:00:00+08:00" content="2015-09-24">
            2015-09-24
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; 作者
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/felix/" itemprop="url" rel="index">
                  <span itemprop="name">felix</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
        

        <!-- tags 挪动位置 -->
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>博客系统基于<a href="http://hexo.io/" target="_blank" rel="external">Hexo</a>搭建，使用主题<a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="external">next.mist</a>。采用<a href="http://duoshuo.com/" target="_blank" rel="external">多说</a>评论系统，站内搜索使用<a href="https://swiftype.com/" target="_blank" rel="external">swiftype</a>。</p>
<h1 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h1><ul>
<li><p>基本环境</p>
<ul>
<li><a href="https://github.com/" target="_blank" rel="external">git</a></li>
<li><a href="https://nodejs.org/en/" target="_blank" rel="external">Node&amp;npm</a></li>
<li><p><a href="http://hexo.io/" target="_blank" rel="external">Hexo</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -g hexo-cli</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>获取项目代码</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">git clone https://github.com/xgfe/xgfe.github.io blog</div><div class="line">cd blog</div><div class="line">npm install</div></pre></td></tr></table></figure>
</li>
<li><p>写博客</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo s [-p 5000] // 启动博客本地环境，默认4000端口，供预览使用</div></pre></td></tr></table></figure>
<p>  博文路径</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">/source/_posts/&#123;namespace&#125;/&#123;title&#125;.md</div></pre></td></tr></table></figure>
<p>  ，直接复制已有文章md文件，修改头部信息即可。</p>
</li>
<li><p>提交代码，通知相关人员审核发布</p>
</li>
</ul>
<h1 id="博客规范"><a href="#博客规范" class="headerlink" title="博客规范"></a>博客规范</h1><p>头部“—”行以前的部分为博文信息定义部分</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">title: 博客说明书                             // 博文名称</div><div class="line">date: 2015-09-24 00:00:00                   // 博文创建时间</div><div class="line">updated: 2015-09-25 00:00:00                // 博文修改时间【可选】</div><div class="line">categories:                                 // 博文分类，可多级，有层级之分</div><div class="line">- felix                                     // 一级分类为&#123;namespace&#125;即它所在文件夹的名称，用为作者</div><div class="line">- blog                                      // 二级分类个人管理，供归纳自己文章用【可选】</div><div class="line">tags:                                       // 标签，可多个，无层级之分</div><div class="line">- blog</div><div class="line">- hexo</div><div class="line">- node</div><div class="line">---</div></pre></td></tr></table></figure>
<h1 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h1><ul>
<li>每个人得{namespace}理论上只有一个，即所有博文放在一个文件夹下</li>
<li>富媒体文件不得放在项目内<ul>
<li>一般图片等资源可放在CDN或者七牛云</li>
<li>ppt可上传到<a href="https://slides.com/xgfe" target="_blank" rel="external">slides</a>，用iframe嵌入</li>
</ul>
</li>
<li>创建时间发布后不可修改，因为所有博客的先后顺序只与创建时间有关，但在第一次发布时可酌情修改</li>
<li><span style="color:red;">文件名不能出现中文，单词用中横线分割，因为文件名会直接出现再生成博文的url路径中（文件里面配置的title才是blog名）</span></li>
<li><span style="color:red;">标签统一用小写，为了避免一个标签出现因大小写不同出现多个的情况，或者可以自己先查看标签云再添加，尽量不要添加辨识度低的标签</span></li>
<li><span style="color:red;">文章不得涉及公司代码和业务</span></li>
</ul>
<h1 id="后期规划"><a href="#后期规划" class="headerlink" title="后期规划"></a>后期规划</h1><ul>
<li>增加githook，做codereview</li>
<li>推广方案待定</li>
</ul>
<h1 id="展望"><a href="#展望" class="headerlink" title="展望"></a>展望</h1><ul>
<li>积累博文库存</li>
<li>提高文章质量</li>
<li>扩大业内影响力</li>
<li>以能挂广告攒团建费为目标</li>
</ul>
<h1 id="感谢"><a href="#感谢" class="headerlink" title="感谢"></a>感谢</h1><p>感谢xgfe团队的所有成员的支持和贡献，感谢小伟哥的耐心指导和付出。</p>
<p>即刻起航，扬帆远行。</p>
</span>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/09/23/hello-world/" itemprop="url">
                Hello World
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          发表于
          <time itemprop="dateCreated" datetime="2015-09-23T11:41:42+08:00" content="2015-09-23">
            2015-09-23
          </time>
        </span>

        

        
          
        

        <!-- tags 挪动位置 -->
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>Welcome to <a href="http://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="http://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="http://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="http://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="http://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="http://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="http://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
</span>
        
      
    </div>

    <footer class="post-footer">

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/8/">&laquo;</a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/8/">8</a><span class="page-number current">9</span>
  </nav>

 </div>

        

        
      </div>

      
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      <section class="site-overview">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <a href="https://github.com/xgfe" target="_blank"><img class="site-author-image" src="http://p0.meituan.net/xgfe/082a9624ba5ae8602150a2d43968463e49348.png" alt="xgfe" itemprop="image"/></a>
          <p class="site-author-name" itemprop="name">xgfe</p>
        </div>
        <p class="site-description motion-element" itemprop="description">xgfe's blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.</p>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">89</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          <div class="site-state-item site-state-categories">
            
              <span class="site-state-item-count">37</span>
              <span class="site-state-item-name">作者</span>
              
          </div>

          <div class="site-state-item site-state-tags">
            <a href="/tags">
              <span class="site-state-item-count">131</span>
              <span class="site-state-item-name">标签</span>
              </a>
          </div>

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" target="_blank" rel="alternate">
              <i class="menu-item-icon icon-next-feed"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/xgfe" target="_blank">GitHub</a>
              </span>
            
          
        </div>

        
        

        <div class="links-of-author motion-element">
          
        </div>

      </section>

      

    </div>
  </aside>


    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner"> <div class="copyright" >
  
  &copy; &nbsp; 
  <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="icon-next-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">xgfe</span>
</div>

<div class="powered-by">
  由 <a class="theme-link" target="_blank" href="http://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>


 </div>
    </footer>

    <div class="back-to-top"></div>
  </div>

  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  
  
    <script type="text/javascript"> 
(function(){ 
var appid = 'cysWiXvkm'; 
var conf = 'prod_fc970dbe85103c7a79b2c4f3dc7fb190'; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if (width < 960) { 
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="http://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("http://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>
    

  


  
  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="/js/fancy-box.js?v=0.4.5.1"></script>


  <script type="text/javascript" src="/js/helpers.js?v=0.4.5.1"></script>
  

  <script type="text/javascript" src="/vendors/velocity/velocity.min.js"></script>
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js"></script>

  <script type="text/javascript" src="/js/motion_global.js?v=0.4.5.1" id="motion.global"></script>




  <script type="text/javascript" src="/js/nav-toggle.js?v=0.4.5.1"></script>
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  

  <script type="text/javascript">
    $(document).ready(function () {
      if (CONFIG.sidebar === 'always') {
        displaySidebar();
      }
      if (isMobile()) {
        FastClick.attach(document.body);
      }
    });
  </script>

  

  
  

  
  <script type="text/javascript" src="/js/lazyload.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#posts").find('img').lazyload({
        placeholder: "/images/loading.gif",
        effect: "fadeIn"
      });
    });
  </script>

  <!-- google search, added by felix -->
  <script>
      $('#gg-form').on('submit', function(e) {
        var keyword = $.trim($(this).find('#gg-search-input').val());
        if (keyword) {
          location.href = 'https://www.google.com.hk/?gfe_rd=cr&ei=hXw8VpjtHuLC8AeSuIjQAg&gws_rd=ssl#safe=strict&q='+encodeURIComponent(keyword)+'+site:xgfe.github.io';
        }
        return false;
      });
  </script>
  <!-- baidu 站长自动推送 -->
  <script>
  (function(){
      var bp = document.createElement('script');
      bp.src = '//push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
  })();
  </script>
</body>
</html>
